<template>
  <div>
    <el-card>
      <LiveOverview :tabs="realTimeData" @refresh="handleRefresh">
        <div slot="search">
          <p class="mb-5 ft-12">
            <span style="color: #fc4560">*</span>
            <span>默认显示全部，可根据月份进行筛选</span>
          </p>

          <SearchForm
            :form-option="formOption"
            :show-btn="true"
            :showArrow="false"
            :btn-list="btnList"
            v-model="formOption.data"
            label-width="90px"
          />
        </div>
      </LiveOverview>
    </el-card>
    <el-card class="mt-20">
      <LineChart
        :title="title"
        :xAxis="xAxis"
        :yAxis="yAxis"
        :legend="legend"
        :series-data="seriesData"
        :color="color"
      />
    </el-card>
  </div>
</template>

<script>
import { useFilterStatistics } from '@/hooks'
export default {
  name: 'FinanceStatistics',
  data() {
    return {
      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'monthrange',
            label: '结算月份',
            value: 'time',
            format: 'yyyy-MM',
            valueFormat: 'yyyy-MM'
          }
        ],
        data: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.handleRefresh()
          }
        },
        {
          label: '重置',
          onClick: () => {
            this.formOption.data = {}
            this.handleRefresh()
          }
        }
      ],
      // 实时刷新数据项
      realTimeData: [
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'orderAmount',
            label: '累计总下单金额（元）'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '总订单下单金额'
          },
          yesterdayData: {
            key: 'orderAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'payAmount',
            label: '累计总支付金额（元）',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '总订单支付金额'
          },
          yesterdayData: {
            key: 'payAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'platformAmount',
            label: '平台累计服务费',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '单笔交易额',
            percentage: '2%（参考）'
          },
          yesterdayData: {
            key: 'platformAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            value: '',
            key: 'costAmount',
            label: '交易手续费（元）'
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '单笔交易额',
            percentage: '0.5%-1%（参考）'
          },
          yesterdayData: {
            key: 'costAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'goodsCashAmount',
            label: '累计成本（元）',
            value: ''
          },
          prompt: {
            showLine: true,
            color: '#409eff',
            text: '单个商品的成本累计'
          },
          yesterdayData: {
            key: 'goodsCashAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'orderNum',
            label: '成交订单总数（单）',
            value: ''
          },
          yesterdayData: {
            key: 'orderNum',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'freightAmount',
            label: '累计运费收取（元）',
            value: ''
          },
          yesterdayData: {
            key: 'freightAmount',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'supplierNum',
            label: '收款总供应商数（家）',
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'settleEnd',
            label: '累计已核对金额（元）',
            value: ''
          },
          yesterdayData: {
            key: 'settleEnd',
            isShow: true,
            value: ''
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'settleStay',
            label: '累计待核对金额（元）',
            value: ''
          },
          color: '#FC4541'
        }
      ],
      // 走势折线图相关
      title: {
        text: '月度现金交易走势'
      },
      xAxis: {
        type: 'category',
        data: []
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        icon: 'circle',
        data: ['支付成功', '未支付']
      },
      color: ['#7AA3EF', '#6C6C6C'],
      seriesData: []
    }
  },
  created() {
    this.handleRefresh()
  },
  methods: {
    //刷新数据
    handleRefresh() {
      this.handleCashSettlementStatistics()
      this.handleCashTrend()
      this.handleTransactionSet()
    },
    //获取交易设置
    async handleTransactionSet() {
      const {
        data: { platformRate, costRate }
      } = await this.$http.system.deal.getSet()
      this.realTimeData = this.realTimeData.map(item => {
        if (item.baseData.key === 'costAmount') {
          item.prompt.percentage = `${costRate}%（参考）`
        }
        if (item.baseData.key === 'platformAmount') {
          item.prompt.percentage = `${platformRate}%（参考）`
        }
        return item
      })
    },
    //获取参数
    handleParams() {
      let params = {}
      const { time } = this.formOption.data
      if (time && time.length) params.startMonth = time[0]
      if (time && time.length) params.endMonth = time[1]
      return params
    },
    //获取现金结算-数据概况-折线图
    async handleCashTrend() {
      const params = this.handleParams()
      const { data } = await this.$http.integral.cashSettlementApi.getCashTrend(params)
      this.seriesData = [
        {
          name: '支付成功',
          type: 'line',
          data: data.map(item => item.endPay)
        },
        {
          name: '未支付',
          type: 'line',
          data: data.map(item => item.noPay)
        }
      ]
      this.xAxis.data = data.map(item => item.time)
    },
    // 获取现金结算-数据概况
    async handleCashSettlementStatistics() {
      const params = this.handleParams()
      const { data: { base, up } } = await this.$http.integral.cashSettlementApi.getCashStatistics(params)

      // 统计数据
      const realTimeData = {
        baseData: {
          ...base
        },
        yesterdayData: { ...up }
      }

      const { time } = this.formOption.data
      const flag = time && time.length ? false : true
      this.realTimeData = useFilterStatistics(this.realTimeData, realTimeData, flag)
    }
  }
}
</script>
